<template>
  <div class="dashboard-container">
      <h3 class="title">机构概览</h3>
    <panel-group @handleSetLineChartData="handleSetLineChartData"></panel-group>
    <h3 class="title">运营指标——检测人数</h3>
    <el-row :gutter="32" class="chart">
      <el-col :xs="24" :sm="24" :lg="12">
        <operating-indicators></operating-indicators>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="count">
          <p>本月检测指标：500人</p>
          <p>本月检测进度：70%</p>
          <p>本月检测人数：70人</p>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="32" class="chart-3">
      <el-col :xs="24" :sm="24" :lg="8">
        <h3 class="title">男女比例</h3>
        <div class="chart-wrapper">
          <man-woman></man-Woman>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <h3 class="title">年龄分布</h3>
        <div class="chart-wrapper">
          <age-distribution></age-distribution>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <h3 class="title">测量分类热度</h3>
        <div class="chart-wrapper">
          <classified-heat></classified-heat>
        </div>
      </el-col>
    </el-row>
       <h3 class="title">身高体重分布</h3>
     <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart ></line-chart>
    </el-row>
  </div>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  import PanelGroup from './components/PanelGroup'
  import OperatingIndicators from './components/OperatingIndicators' // 运营指标
  import ManWoman from './components/ManWoman' // 男女比例
  import AgeDistribution from './components/AgeDistribution' // 年龄分布
  import ClassifiedHeat from './components/ClassifiedHeat' // 分类热度
  import LineChart from './components/LineChart'
  const lineChartData = {
    newVisitis: {
      expectedData: [100, 120, 161, 134, 105, 160, 165],
      actualData: [120, 82, 91, 154, 162, 140, 145]
    },
    messages: {
      expectedData: [200, 192, 120, 144, 160, 130, 140],
      actualData: [180, 160, 151, 106, 145, 150, 130]
    },
    purchases: {
      expectedData: [80, 100, 121, 104, 105, 90, 100],
      actualData: [120, 90, 100, 138, 142, 130, 130]
    },
    shoppings: {
      expectedData: [130, 140, 141, 142, 145, 150, 160],
      actualData: [120, 82, 91, 154, 162, 140, 130]
    }
  }
  export default {
    name: 'dashboard',
    components: {
      PanelGroup,
      OperatingIndicators,
      ManWoman,
      AgeDistribution,
      ClassifiedHeat,
      LineChart
    },
    computed: {
      ...mapGetters(['name', 'roles'])
    },
    methods: {
      handleSetLineChartData(type) {
        this.lineChartData = lineChartData[type]
      }
    }
  }

</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.title{
  color: #333;
  font-size: 18px;
  font-weight: normal;
}
  .dashboard {
    &-container {
      background-color: #f3f3f3;
      padding: 30px;
      padding-top: 10px;
      .chart-wrapper {
        background: #fff;
        padding: 16px 16px 0;
      }
      .chart-3{
      }
      .chart {
        background: #fff;
        margin: 0 !important;
        .count {
          margin-top: 50px;
          p {
            display: block;
            width: 80%;
            margin: 10px auto;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background: #1cc09f;
            color: #fff;
            font-size: 18px;
            border-radius: 5px;
            margin-bottom: 45px;
          }
        }
      }
      .chart-tit{
        margin-top: 20px;
        width: 100%;
      }
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }

</style>
